<?php
$cdnUrl='./';
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2019德尔双十一</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
html,body{width:100%;font-size:12px;font-family:Helvetica,Tahoma, Arial, STXihei,Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{background:#013c82;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow-y: scroll;}
body, div{padding:0px;margin:0px auto;max-width:750px;}
.weui-dialog{position:fixed;z-index:5000;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#FFF;text-align:center;border-radius:3px;overflow:hidden}.weui-dialog__hd{padding:1.3em 1.6em .5em}.weui-dialog__title{font-weight:400;font-size:36px}.weui-dialog__bd{padding:0 1.6em .8em;min-height:40px;font-size:15px;line-height:1.3;word-wrap:break-word;word-break:break-all;color:#999}.weui-dialog__bd:first-child{padding:1.2em 20px .1em;color:#353535}.weui-dialog__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-dialog__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3CC51F;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative}.weui-dialog__btn:active{background-color:#EEE}.weui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}.weui-dialog__btn:first-child:after{display:none}.weui-dialog__btn_default{color:#353535}.weui-dialog__btn_primary{color:#0BB20C}@media screen and (min-width:1024px){.weui-dialog{width:35%}}.weui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.6)}
.weui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0}
.js_dialog{display:none;}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg, .p3-cj{position:absolute;display:block;}
a{text-decoration:none;}
.txt{position:absolute;text-indent:4px;color:#787c7f;font-size:12px;z-index:2;border:none;background:transparent;}
.txt::-webkit-input-placeholder{text-align:left;color:#a2a2a2;}
select{position:absolute;color:#787c7f;display:block;background:transparent;border:0px;text-indent:4px;font-size:12px;-webkit-appearance:none;}
.container{position:relative;width:100%;height:auto;overflow:hidden;}
.page{position:absolute;width:100%;height:100%;display:none;}
.p1{position:absolute;width:100%;height:100%;}
.p-bg, .thebg{position:absolute;width:100%;top:0;left:0;}
.p1-t1, .p2-t1{position:absolute;width:100%;top:0;left:0;}
.hide{display:none;}
.p1-bottom{position:absolute;width:100%;display:block;left:0;bottom:0;}
.p3-ci{position:absolute;color:#f4e75a;font-size:13px;text-align:center;}
.p4-tou{border-radius:50%;}
.wo-li{position:absolute;width:100%;left:0;}
.wo-l{position:relative;width:100%;display:block;left:0;}
.wo-n1, .wo-n2{position:absolute;color:#002f76;top:0;}
.wo-n1{font-size:15px;font-weight:bold;width:39%;left:0;text-align:right;}
.wo-n2{font-size:14px;left:36%;width:48%;text-align:center;}
</style></head><body>
<div class="container">
	 <div class="p1 page">
	     <img class="p-bg p1-bg" src="<?php echo $cdnUrl ?>img/p1.jpg">  
	     <img class="p1-t1" src="<?php echo $cdnUrl ?>img/p1-t1.png"> 
	     <div class="thebg">
	        <img class="p1-t2 simg" src="<?php echo $cdnUrl ?>img/p1-t2.png">
			<img class="p1-t3 simg" src="<?php echo $cdnUrl ?>img/p1-t3.png">
			<img class="p1-b1 simg" src="<?php echo $cdnUrl ?>img/p1-b1.png">
			<img class="p1-b2 simg" src="<?php echo $cdnUrl ?>img/p1-b2.png">
		 </div>
	</div>
	<div class="p2 page">
	   <img class="p-bg p1-bg" src="<?php echo $cdnUrl ?>img/p1.jpg">
	   <img class="p2-t1" src="<?php echo $cdnUrl ?>img/p2-t1.png">
	   <div class="thebg">
	   	 <img class="p2-t2 simg" src="<?php echo $cdnUrl ?>img/p2-t2.png">
	   	 <img class="p2-t3 simg" src="<?php echo $cdnUrl ?>img/p2-t3.png">
	   	 <img class="p2-txt simg" src="<?php echo $cdnUrl ?>img/p2-txt.png">
	   	 <img class="p2-b1 simg" src="<?php echo $cdnUrl ?>img/p2-b1.png">
	   	 <img class="p2-b2 simg" src="<?php echo $cdnUrl ?>img/p2-b2.png">
	   </div>  
	</div>
	
	<div class="p3 page">
	   <img class="p-bg p1-bg" src="<?php echo $cdnUrl ?>img/3.jpg">
	   <img class="p2-t1" src="<?php echo $cdnUrl ?>img/p2-t1.png">
	   <div class="thebg">
	      <img class="p3-t1 simg" src="<?php echo $cdnUrl ?>img/p3-t1.png"> 
	   	  <img class="p3-t2 simg" src="<?php echo $cdnUrl ?>img/p3-t2.png">
	   	  <div class="p3-ci">1</div>
	   	  <img class="p3-c1 p3-cj" data-id="1" src="./img/p3-l.png">
	   	  <img class="p3-c2 p3-cj" data-id="2" src="./img/p3-l.png">
	   	  <img class="p3-c3 p3-cj" data-id="3" src="./img/p3-l.png">
	   	  <img class="p3-c4 p3-cj" data-id="4" src="./img/p3-l.png">
	   	  <img class="p3-c5 p3-cj" data-id="5" src="./img/p3-l.png">
	   	  <img class="p3-c6 p3-cj" data-id="6" src="./img/p3-l.png">
	   	  <img class="p3-c7 p3-cj" data-id="7" src="./img/p3-l.png">
	   	  <img class="p3-c8 p3-cj" data-id="8" src="./img/p3-l.png">
	   	  
	   	  
	   	  
	   	  <img class="p3-tu simg" src="<?php echo $cdnUrl ?>img/p3-tu.png">
	   	  <img class="p3-start simg" src="./img/p3-start.png"> 
	   	  <img class="p3-txt simg" src="<?php echo $cdnUrl ?>img/p3-txt.png">
	   	  <img class="p3-b1 simg" src="<?php echo $cdnUrl ?>img/p3-b1.png">
	   	  
	   </div>
	
	</div>
	<div class="p4 page">
	    <img class="p-bg p1-bg" src="<?php echo $cdnUrl ?>img/p1.jpg">
	    <img class="p2-t1" src="<?php echo $cdnUrl ?>img/p2-t1.png">
	    <div class="thebg">
	      <img class="p4-t1 simg" src="<?php echo $cdnUrl ?>img/p4-t1.png">
	      <img class="p4-t2 simg" src="<?php echo $cdnUrl ?>img/p4-5.png">
	      <img class="p4-txt simg" src="<?php echo $cdnUrl ?>img/p4-txt.png">
	      
	      <img class="p4-b1 simg" src="<?php echo $cdnUrl ?>img/p4-b1.png">
	      <img class="p4-b2 simg" src="<?php echo $cdnUrl ?>img/p4-b2.png">
	      
	    </div>
	</div>
	
	<div class="wo page">
	   <img class="p-bg p1-bg" src="<?php echo $cdnUrl ?>img/p1.jpg">
	   <img class="p2-t1" src="<?php echo $cdnUrl ?>img/p2-t1.png">
	   <div class="thebg">
	      <img class="wo-t2 simg" src="<?php echo $cdnUrl ?>img/wo-t2.png">
	      <img class="p4-t1 simg" src="<?php echo $cdnUrl ?>img/p4-t1.png">
	      <img class="wo-t1 simg" src="<?php echo $cdnUrl ?>img/wo-t1.png">
	      
	      <img class="p4-tou simg" src="">
	      <div class="wo-li">
	      <div class="wo-n1"><strong>五等奖</strong></div><div class="wo-n2">精美礼品</div>
	      </div>
	      <img class="wo-txt simg" src="<?php echo $cdnUrl ?>img/wo-txt.png">
	      <img class="wo-b1 simg" src="<?php echo $cdnUrl ?>img/wo-b1.png">
	   </div>
	   
	
	</div>


</div>
<script src="http://mat1.gtimg.com/libs/jquery2/2.1.4/jquery2.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/pxloader-images.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
_h=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);
if(h<_rate*1222){h=_rate*1222;}
var _img=['en.png'];
var loader = new PxLoader();
for(var i=0; i<_img.length; i++){loader.addImage('./img/'+_img[i]);}
loader.start();
loader.addCompletionListener(function(e){
	   $(".wo").fadeIn();
});
function fixScroll(){
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isiOS) {
      window.scrollTo(0, 0);
    }
}
$("input, select").blur(function(){fixScroll()});
$(function(){
	$('body').on('touchmove',function(e){
		//e.preventDefault();
	});
	$('.container').width(sWidth).height(h);
	$('.p-bg').width(sWidth).height(_rate*1222);
	$('.thebg').width(sWidth).height(_rate*1222);
	$('.p1-t2').width(sWidth).height(_rate*450).css({"top":_rate*158, "left":0});
	$('.p1-t3').width(sWidth).height(_rate*288).css({"top":_rate*646, "left":0});
	$('.p1-b1').width(_rate*298).height(_rate*92).css({"top":_rate*1056, "left":_rate*58});
	$('.p1-b2').width(_rate*287).height(_rate*92).css({"top":_rate*1056, "left":_rate*405});
	$('.p2-t2').width(_rate*655).height(_rate*156).css({"top":_rate*140, "left":0});
	$('.p2-t3').width(sWidth).height(_rate*931).css({"top":_rate*260, "left":0});
	$('.p2-txt').width(_rate*610).height(_rate*54).css({"top":_rate*1058, "left":0});
	$('.p2-b1').width(_rate*286).height(_rate*92).css({"top":_rate*1112, "left":_rate*64});
	$('.p2-b2').width(_rate*299).height(_rate*92).css({"top":_rate*1112, "left":_rate*398});
 
	$('.p3-t1').width(_rate*684).height(_rate*224).css({"top":_rate*114, "left":0});
	$('.p3-t2').width(sWidth).height(_rate*769).css({"top":_rate*280, "left":0});

	$('.p3-tu').width(_rate*681).height(_rate*551).css({"top":_rate*418, "left":0});
	$('.p3-txt').width(_rate*614).height(_rate*109).css({"top":_rate*1000, "left":0});
	$('.p3-b1').width(_rate*264).height(_rate*83).css({"top":_rate*1114, "left":_rate*242});
	$('.p4-t1').width(_rate*660).height(_rate*177).css({"top":_rate*118, "left":0});
	$('.p4-t2').width(_rate*708).height(_rate*747).css({"top":_rate*326, "left":0});

	
	$('.p4-txt').width(_rate*648).height(_rate*135).css({"top":_rate*952, "left":0});
	$('.p4-b1').width(_rate*286).height(_rate*113).css({"top":_rate*1082, "left":_rate*60});
	$('.p4-b2').width(_rate*286).height(_rate*113).css({"top":_rate*1082, "left":_rate*410});

	
	$('.wo-txt').width(_rate*605).height(_rate*65).css({"top":_rate*1054, "left":0});
	$('.wo-t1').width(_rate*490).height(_rate*57).css({"top":_rate*626, "left":0});
	$('.wo-t2').width(_rate*713).height(_rate*799).css({"top":_rate*282, "left":0});
	 
	$('.wo-b1').width(_rate*271).height(_rate*86).css({"top":_rate*1112, "left":_rate*234});

	$('.wo-li').height(_rate*74).css({"top":_rate*712});
 
	
	$('.p3-cj').width(_rate*220).height(_rate*188);
	$('.p3-c1').css({"top":_rate*430, "left":_rate*56});
	$('.p3-c2').css({"top":_rate*430, "left":_rate*265});
	$('.p3-c3').css({"top":_rate*430, "left":_rate*474});
	$('.p3-c4').css({"top":_rate*602, "left":_rate*474});
	$('.p3-c5').css({"top":_rate*774, "left":_rate*474});
	$('.p3-c6').css({"top":_rate*774, "left":_rate*265});
	$('.p3-c7').css({"top":_rate*774, "left":_rate*56});
	$('.p3-c8').css({"top":_rate*602, "left":_rate*56});

	$('.p3-ci').width(_rate*38).height(_rate*70).css({"top":_rate*303, "left":_rate*356, 'line-height':_rate*70+'px'});
	$('.p3-start').width(_rate*217).height(_rate*179).css({"top":_rate*604, "left":_rate*267});
	$('.p4-tou').width(_rate*174).height(_rate*174).css({"top":_rate*426, "left":_rate*299});

	
	
    console.log(h);
    console.log(_rate*1222);
	if(h > _rate*1222){
		   var _cha= (h - _rate*1222)/2;
		   if(_cha > 0){
		      $('.thebg').css({"top":_cha});
		      $(".p1-bg").width(sWidth).height(h).attr("src","<?php echo $cdnUrl ?>img/p1x.jpg");
		   }   
	}



	$('.p1-b1').click(function(){
       $(".p1").fadeOut();
       $(".p2").fadeIn();
	});
	$('.p1-b2').click(function(){
	    $(".p1").fadeOut();
	    $(".wo").fadeIn();
	});
	$('.wo-b1').click(function(){
	    $(".wo").fadeOut();
	    $(".p1").fadeIn();
	});
	$('.p2-b1').click(function(){
	    $(".p2").fadeOut();
	    $(".p3").fadeIn();
	});
	$('.p2-b2').click(function(){
	    $(".p2").fadeOut();
	    $(".p1").fadeIn();
	});
	$('.p3-b1').click(function(){
	    $(".p3").fadeOut();
	    $(".p2").fadeIn();
	});
	$('.p4-b1').click(function(){
	    $(".p4").fadeOut();
	    $(".wo").fadeIn();
	});
	$('.p4-b2').click(function(){
	    $(".p4").fadeOut();
	    $(".p3").fadeIn();
	}); 
 

	var _p3Time=100;
	var _p3Id=1;
	var _p3Flag=true;
	var _p3Max=1;
	var _p3N=3;
	function _chou(){
		_p3Id++;
		_p3Max++;
	    if(_p3Id > 8){_p3Id=1;}
	    if(_p3Id < 2){
		  _lastid=8;
		}else{
		  _lastid=_p3Id-1;
		}
	    $(".p3-c"+_lastid).attr("src",'./img/p3-l.png');
	    $(".p3-c"+_p3Id).attr("src",'./img/p3-lh.png');
	    if(_p3Max > 8 && _p3N == _p3Id){
	    	window.setTimeout(function(){
                  $(".p3").fadeOut();
                  $(".p4").fadeIn();
		    	}, 1000);
			      
	       return; 
	    }
	    
	    _p3Time=_p3Time+8;
		window.setTimeout(function(){
			_chou();
			}, _p3Time);
	}
	
	$('.p3-start').click(function(){
		$.post("./api/?c=start", {}, function(data){
			console.log(data);
			if('y' == data.s){
				_p3N=data.n;
				$(".p4-t2").attr("src", "./img/p4-"+data.l+".png");
				_chou();
		    }else{

			}
			}, "json");
		
	}); 

	$.post("./api/?c=getj",{}, function(data){
	   console.log(data.l);
       $('.p4-tou').attr("src", data.a);
	}, "json");
	 
});
</script></body></html>